<template>
  <div class="gis-analysis">
    <div
      class="gis-analysis-left"
      :style="{ width: gisAnalysisToolState ? 'calc(100% - 400px)' : '100%' }"
    >
      <!-- 工具栏 -->
      <div v-show="!fullScreenState" class="gis-tool-bar">
        <tool-bar
          :tool-bar-setting="toolBarSetting"
          :lock-mode="lockMode"
          @setting="changeSettingValue"
          @change-tab="changeTabAfterCopy"
        />
      </div>
      <div
        ref="gisDataDetailAndEdit"
        :style="{ height: fullScreenState ? '100%' : 'calc(100% - 38px)' }"
        class="map-gis-data"
      >
        <div
          class="gis-map-container"
          :style="{
            height: `calc(100% - ${gisDataHeight}px)`,
          }"
        >
          <gis-map
            ref="gisMap"
            :current-tab-id="currentTabId"
            :tool-bar-setting="toolBarSetting"
          />
        </div>
        <div
          class="gis-data-container"
          :style="{
            height: `${gisDataHeight}px`,
          }"
        >
          <div
            v-show="!fullScreenState"
            class="map-resize-data"
            @mousedown="resizeLogHeight($event)"
          ></div>
          <!-- 数据详情 -->
          <gis-layer-detail-data
            :current-tab-id="currentTabId"
            :gis-data-height="gisDataHeight"
            @gis-data-full="gisFullScreen"
            @pack-up="packUp"
          />
        </div>
      </div>
    </div>
    <div
      v-show="!lockMode"
      class="gis-right-drawer"
      :style="{ width: gisAnalysisToolState ? '400px' : 0 }"
    >
      <!-- toggle icon -->
      <div
        v-show="!fullScreenState"
        class="handler"
        @click="toggleGisSettingPanel"
      >
        <a-icon :type="gisAnalysisToolState ? 'right' : 'left'" />
      </div>
      <gis-drawer v-if="gisAnalysisToolState && !fullScreenState" />
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 右侧分析模块
 */
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import ToolBar from '@/components/gis/gis-analysis/ToolBar.vue'
import GisDrawer from '@/components/gis/gis-analysis/GisDrawer.vue'
import GisMap from '@/components/gis/gis-analysis/GisMap.vue'
import GisLayerDetailData from '@/components/gis/layer-detail-data/GisLayerDetailData.vue'
import GisStore, { Tab } from '@/store/modules/gis'

@Component({
  components: {
    ToolBar,
    GisDrawer,
    GisMap,
    GisLayerDetailData,
  },
})
export default class GisAnalysis extends Vue {
  @Prop({ type: Boolean, default: false }) private lockMode!: boolean
  public mouseLastPosition = { x: 0, y: 0 }
  public gisDataHeight: number = 0 // 底部数据详情高度
  private get gisAnalysisToolState() {
    return GisStore.gisAnalysisToolState // 右侧抽屉状态
  }

  public toolBarSetting: any = {} // 关于 画布的配置

  public get currentTabId() {
    return GisStore.currentTabId
  }

  public get tabs(): Tab[] {
    return GisStore.gisTabs
  }

  // 全屏状态
  public get fullScreenState() {
    return GisStore.fullScreenState
  }

  // 当前选择的 layer
  public get selectLayer() {
    return GisStore.selectLayer
  }

  @Watch('currentTabId', { immediate: true })
  public watchTabId(id: number) {
    const currentTab: any = this.tabs.filter((tab: Tab) => tab.tabId === id)[0]
    if (currentTab) {
      this.toolBarSetting = currentTab.data // 配置项
    }
  }

  @Watch('selectLayer.id', { immediate: true })
  public watchSelectLayer(layer: any) {
    if (layer) {
      this.gisDataHeight = GisStore.gisDataHeight
    } else {
      this.gisDataHeight = 0
    }
  }

  public get viewDataLayerTime() {
    return GisStore.viewDataLayerTime
  }

  @Watch('viewDataLayerTime')
  public onViewDataLayerTime(time: number) {
    if (time > 0) {
      if (GisStore.gisDataHeight <= 100) {
        GisStore.setGisDataHeight(400)
      }
      this.gisDataHeight = GisStore.gisDataHeight
    }
  }

  /**
   * 修改配置 设置， 地图
   * @param config
   */
  public async changeSettingValue(config: any) {
    const { type, info } = config
    // 将工具栏关于Tab的Data的改动同步到store，随后调用saveInfo自动保存所有信息
    Object.entries(info).forEach(([dataField, dataValue]) => {
      GisStore.updateTabData({ dataField, dataValue })
    })
    await GisStore.gisSaveTabInfoWithLayer()
    this.toolBarSetting = {
      ...this.toolBarSetting,
      ...info,
    }
    const setInfo: any = {
      setting: type,
      ...info,
    }
    this.toolBarSettingUpdateMap(setInfo)
  }

  public changeTabAfterCopy(tabId: number) {
    this.$emit('copy-tab', tabId)
  }

  public toolBarSettingUpdateMap(info: any) {
    const gisMap: any = this.$refs.gisMap as Vue
    gisMap.updateSetting(info)
  }

  /**
   * toggle gis 右侧分析工具
   */
  public toggleGisSettingPanel() {
    GisStore.setGisAnalysisToolState(!GisStore.gisAnalysisToolState)
  }

  /**
   * 图层更新
   * @param info
   */
  public layerUpdate(info: any) {
    const gisMap: any = this.$refs.gisMap as Vue
    gisMap.layerUpdate(info)
  }

  /**
   * 全屏显示
   */
  public gisFullScreen(packUp: boolean) {
    this.$emit('gis-data-full')
    if (packUp) {
      this.gisDataHeight = 38
      GisStore.setGisDataHeight(this.gisDataHeight)
    }
  }

  /**
   * 收起图层数据详情
   */
  public packUp() {
    this.gisDataHeight = 38
    GisStore.setGisDataHeight(this.gisDataHeight)
  }

  /**
   * GisView 调用 修改数据详情高度
   * @param height
   */
  public setDataContainerHeight(height: number) {
    this.gisDataHeight = height
  }

  // 节点编辑面板是否在拖动改变高度
  public isNodeEditModuleDragged: boolean = false

  public editPanelMaxHeight: number = 0

  /**
   * 改变节点编辑模块高度
   */
  public resizeLogHeight($event: MouseEvent) {
    // if (!this.panelFullScreen) {
    $event.stopPropagation()
    this.editPanelMaxHeight = (
      this.$refs.gisDataDetailAndEdit as HTMLElement
    ).getBoundingClientRect().height
    this.mouseLastPosition = { x: $event.screenX, y: $event.screenY }
    this.isNodeEditModuleDragged = true
    document.addEventListener('mouseup', this.dragMouseUpListener)
    document.addEventListener('mousemove', this.dragMouseMoveListener)
    // }
  }

  public dragMouseMoveListener({ screenX, screenY }: MouseEvent) {
    const dy = screenY - this.mouseLastPosition.y
    this.$nextTick(() => {
      if (
        this.gisDataHeight >= 38 &&
        this.gisDataHeight <= this.editPanelMaxHeight
      ) {
        let height: number = this.gisDataHeight - dy
        if (height < 38) {
          height = 38
        }
        if (height > this.editPanelMaxHeight) {
          height = this.editPanelMaxHeight
        }
        this.gisDataHeight = height
        this.mouseLastPosition = { x: screenX, y: screenY }
      }
    })
  }

  public async dragMouseUpListener() {
    // const reference: any = this.$refs.graph as Vue
    // reference.initVariable()
    document.removeEventListener('mousemove', this.dragMouseMoveListener)
    document.removeEventListener('mouseup', this.dragMouseUpListener)
    // 保存高度
    GisStore.setGisDataHeight(this.gisDataHeight)
    // this.setDataCleanTableHeight()
    this.isNodeEditModuleDragged = false
  }
}
</script>

<style lang="less" scoped>
.gis-analysis {
  display: flex;
  height: 100%;

  .gis-analysis-left {
    height: 100%;

    .gis-tool-bar {
      height: 38px;
    }

    .map-gis-data {
      //align-items: center;
      display: flex;
      flex-direction: column;

      .gis-map-container {
        background: #fff;
      }

      .gis-data-container {
        background: #fff;
        box-sizing: border-box;
        position: relative;

        .map-resize-data {
          cursor: ns-resize;
          height: 10px;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 100;
        }
      }
    }
  }

  .gis-right-drawer {
    height: 100%;
    position: relative;

    .handler {
      background: #dee3f7;
      color: #1e49f8;
      cursor: pointer;
      font-size: 9px;
      height: 70px;
      left: -12px;
      line-height: 70px;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-100%);
      width: 12px;
      z-index: 101;

      &::before,
      &::after {
        border: 6px solid #dee3f7;
        content: '';
        height: 0;
        left: 0;
        position: absolute;
        width: 0;
      }

      &::before {
        border-left-color: transparent;
        border-top-color: transparent;
        top: -12px;
      }

      &::after {
        border-bottom-color: transparent;
        border-left-color: transparent;
        bottom: -12px;
      }
    }
  }
}
</style>
